<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>完善详细信息</title>
		<meta
			name="description"
			content="为了让医生对您的病情有更深入的了解，需要您配合在建档过程中填写糖尿病相关的详细信息。若无法自行填写，请及时联系您的医助进行代填。"
		/>
		<meta
			property="og:description"
			content="为了让医生对您的病情有更深入的了解，需要您配合在建档过程中填写糖尿病相关的详细信息。若无法自行填写，请及时联系您的医助进行代填。"
		/>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/baseInfo.css" />
		<style>
			.container {
				height: 17.52rem;
			}
			.bodyInfo {
				padding: 0 0.21rem;
				font-size: 0.31rem;
				height: 0.73rem;
				line-height: 0.73rem;
			}
			.info-question p {
				font-size: 0.28rem;
				height: 0.73rem;
				line-height: 0.73rem;
			}
			.info-question div {
				position: relative;
			}
			.input-unit {
				position: absolute;
				right: 0.33rem;
				top: 0.22rem;
				font-size: 0.28rem;
				color: rgba(0, 0, 0, 0.45);
				z-index: 99;
			}
			.user {
				position: absolute;
				left: 0.21rem;
				bottom: 1.29rem;
				font-size: 0.25rem;
				color: #0068c4;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-nav-bar
				title="详细信息"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			>
				<template #right>
					<van-icon name="wap-home-o" size="18" />
				</template>
			</van-nav-bar>
			<div class="container">
				<div class="info-title">
					<i></i>
					<span>详细信息（选填）</span>
				</div>
				<p class="bodyInfo">您当前的身体状况</p>
				<div class="info-question" v-for="item in questionList">
					<p :class="item.type == 'button' ? 'marginTop' : ''">
						{{item.title}}
					</p>
					<div v-if="item.type == 'input'">
						<span class="input-unit">{{item.unit}}</span>
						<van-field
							v-model="info[item.key]"
							:placeholder="item.placeholder"
						/>
					</div>
					<div v-if="item.type == 'number'">
						<van-password-input
							:value="info[item.key]"
							:focused="showKeyboard"
							@focus="showKeyboard = true"
						/>
						<van-number-keyboard
							v-model="info[item.key]"
							:show="showKeyboard"
							@blur="showKeyboard = false"
						/>
					</div>
				</div>
				<div class="baseInfo_value" @click="postData">
					<span style="color: #f3f3f3">提交</span>
				</div>
				<a class="user" href="../../patient/regulation/patientNotice.html"
					>《用户告知书》</a
				>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		import { mixin } from '../js/mixin.js'
		const baseInfo = {
			mixins: [mixin],
			data() {
				return {
					questionList: [
						{
							title: '身高',
							type: 'input',
							key: 'height',
							unit: 'cm',
							placeholder: '请输入身高',
						},
						{
							title: '体重',
							type: 'input',
							key: 'weight',
							unit: 'kg',
							placeholder: '请输入体重',
						},
						{
							title: '腰围',
							type: 'input',
							key: 'waistline',
							unit: 'cm',
							placeholder: '请输入腰围',
						},
						{
							title: '空腹C肽',
							type: 'input',
							key: 'cpeptide',
							unit: 'μg/L',
							placeholder: '请输入空腹C肽',
						},
						{
							title: '餐后2小时C肽',
							type: 'input',
							key: 'cpeptide2h',
							unit: 'μg/L',
							placeholder: '请输入餐后2小时C肽',
						},
						{
							title: '糖化血红蛋白',
							type: 'input',
							key: 'hba1c',
							unit: '%',
							placeholder: '请输入糖化血红蛋白',
						},
						{
							title: '2小时胰岛素',
							type: 'input',
							key: 'insulin2h',
							unit: 'U',
							placeholder: '请输入2小时胰岛素',
						},
						{
							title: '空腹血糖',
							type: 'input',
							key: 'sugarFasting',
							unit: 'mmol/L',
							placeholder: '请输入空腹血糖',
						},
						{
							title: '餐后2小时血糖',
							type: 'input',
							key: 'sugar2h',
							unit: 'mmol/L',
							placeholder: '请输入餐后2小时血糖',
						},
					],
					info: {},
					show: false,
					getUrl: '/archive/detail/get',
					postUrl: '/archive/detail/save',
				}
			},
			created() { },
			methods: {
				fetchData() {
					const patientId = localStorage.getItem('pid')
					getAction(spliceUrl(this.getUrl), { patientId }).then(res => {
						if (res.data.success) {
							this.info = res.data?.result
						}
					})
				},
				postData() {
					const params = this.info
					postAction(spliceUrl(this.postUrl), params).then(res => {
						window.location.href = '../index.html'
					})
				},
				onClickLeft() {
					history.back()
				},
				onClickRight() {
					window.location.href = '../index.html'
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
